<script setup>
//导入自定义的axios实例
import axiosApi from './http/index.js'
import {ref,onBeforeMount} from "vue";

//接收远程数据的，默认是数组，返回的数据就是数组
const users = ref([])

//获取远程数据的函数
const getData = ()=>{
  //发送请求
  axiosApi.get('https://jsonplaceholder.typicode.com/users')
      .then(resp=>{ //正常获取到数据要执行的代码
        console.log('获取到的数据:',resp)
        //赋值
        //users.value = resp.data
        users.value = resp
      })
      .catch(error=>{//获取数据报错时，要执行的代码
        console.log('请求数据发生错误:',error)
      })
}
//挂载前执行的钩子函数
onBeforeMount(()=>{
  //调用函数，获取远程数据
  getData()
})

</script>

<template>
    <div><button @click="getData">获取远程数据</button></div>
    <table width="100%" border="1">
       <tr>
         <td>编号</td>
         <td>姓名</td>
         <td>用户名</td>
         <td>邮箱</td>
       </tr>
      <tr v-for="user in users">
          <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.username}}</td>
        <td>{{user.email}}</td>
      </tr>
    </table>
</template>

<style scoped>

</style>